<template>
  <div class="win-div" ref="win-ref">
    <div class="win-content-div">
      <div class="win-content">
        <slot name="content"></slot>
      </div>
    </div>
    <div class="win-content-button-div">
      <div class="win-content-button-row">
        <slot name="foot"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BaseWin",
  data(){
    return{
      dataValue:{}
    }
  },
  props:{
    height:{
      type:String,
      default:()=>{
        return '170px';
      }
    },
    width:{
      type:String,
      default:()=>{
        return '400px';
      }
    }
  },
  methods:{
    inputvalueChange(name,value){
      if(undefined===value || ''===value || value.length===0){
        delete this.dataValue[name];
      }else{
        this.dataValue[name] = value;
      }
    },
    getValues(){
      return this.dataValue;
    }
  },
  mounted() {
    this.$refs["win-ref"].style.width=this.width;
    this.$refs["win-ref"].style.height=this.height;
    this.$on("inputRegist",this.inputRegist);
  }
}
</script>

<style scoped>
.win-div{
  box-shadow: 1px 1px 8px #888888;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 1px #bbbbbb solid;
  border-radius: 2px;
  background: #eeeeff;;
  z-index: 10000;
}
.win-content-div{
  height: 75%;
}
.win-content{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}
.win-content-button-div{
  width: 100%;
  height: 25%;
  position: absolute;
  margin-bottom: 10px;
  bottom: 0;
}
.win-content-button-row{
  margin: 0 auto;
}
</style>